<div class="panel_head">
	<h1>界面元素</h1>
</div>
<hr/>
<!-- 按钮 start -->
<div class="panel_box">
	<div class="panel_title">
		<span class="panel_icon"><i class="icon icon_bookmark"></i></span>
		<h5>按钮</h5>
	</div>
	<div class="panel_content">
		<h5>小按钮</h5>
		<code>(class="btn btn_mini")</code>
		<p>
			<button class="btn btn_mini">普通(btn)</button>
			<button class="btn btn_mini btn_manage">管理(btn_manage)</button>
			<button class="btn btn_mini btn_modify">修改(btn_modify)</button>
			<button class="btn btn_mini btn_add">添加(btn_add)</button>
			<button class="btn btn_mini btn_invalid">作废(btn_invalid)</button>
			<button class="btn btn_mini btn_del">删除(btn_del)</button>
			<button class="btn btn_mini btn_other">其他(btn_other)</button>
		</p>
		<hr/>
		<h4>General Buttons </h4>
		<code>(class="btn")</code>
		<p>
			<button class="btn">普通(btn)</button>
			<button class="btn btn_manage">管理(btn_manage)</button>
			<button class="btn btn_modify">修改(btn_modify)</button>
			<button class="btn btn_add">添加(btn_add)</button>
			<button class="btn btn_invalid">作废(btn_invalid)</button>
			<button class="btn btn_del">删除(btn_del)</button>
			<button class="btn btn_other">其他(btn_other)</button>
		</p>
		<hr/>
		<h3>Large Buttons </h3>
		<code>(class="btn btn_large")</code>
		<p>
			<button class="btn btn_large">普通(btn)</button>
			<button class="btn btn_large btn_manage">管理(btn_manage)</button>
			<button class="btn btn_large btn_modify">修改(btn_modify)</button>
			<button class="btn btn_large btn_add">添加(btn_add)</button>
			<button class="btn btn_large btn_invalid">作废(btn_invalid)</button>
			<button class="btn btn_large btn_del">删除(btn_del)</button>
			<button class="btn btn_large btn_other">其他(btn_other)</button>
		</p>
	</div>
</div>
<!-- 按钮 end -->
<!-- 图标 start -->
<div class="panel_box">
	<div class="panel_title">
		<span class="panel_icon"><i class="icon icon_bookmark"></i></span>
		<h5>All Icons</h5>
	</div>
	<div class="panel_content">
		<div class="btn_icon_pg">
			<ul>
				<li><i class="icon icon_bookmark"></i> icon_bookmark</li>
				<li><i class="icon icon_list"></i> icon_list</li>
				<li><i class="icon icon_table"></i> icon_table</li>
			</ul>
		</div>
	</div>
</div>
<!-- 图标 end -->
<!-- 标签和标识 start -->
<div class="panel_box">
	<div class="panel_title">
		<span class="panel_icon"><i class="icon icon_bookmark"></i></span>
		<h5>Labels and badges</h5>
	</div>
	<div class="panel_content">
		<table class="table">
			<thead>
				<tr>
					<th>Labels</th>
					<th>Markup</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><span class="label">Default</span></td>
					<td><code>&lt;span class="label"&gt;</code></td>
				</tr>
				<tr>
					<td><span class="label label_success">Success</span></td>
					<td><code>&lt;span class="label label_success"&gt;</code></td>
				</tr>
				<tr>
					<td><span class="label label_warning">Warning</span></td>
					<td><code>&lt;span class="label label_warning"&gt;</code></td>
				</tr>
				<tr>
					<td><span class="label label_important">Important</span></td>
					<td><code>&lt;span class="label label_important"&gt;</code></td>
				</tr>
				<tr>
					<td><span class="label label_info">Info</span></td>
					<td><code>&lt;span class="label label_info"&gt;</code></td>
				</tr>
				<tr>
					<td><span class="label label_inverse">Inverse</span></td>
					<td><code>&lt;span class="label label_inverse"&gt;</code></td>
				</tr>
			</tbody>
		</table>
		<table class="table table-bordered table-striped">
			<thead>
				<tr>
					<th>Name</th>
					<th>Example</th>
					<th>Markup</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td> Default </td>
					<td><span class="badge">1</span></td>
					<td><code>&lt;span class="badge"&gt;</code></td>
				</tr>
				<tr>
					<td> Success </td>
					<td><span class="badge badge_success">2</span></td>
					<td><code>&lt;span class="badge badge_success"&gt;</code></td>
				</tr>
				<tr>
					<td> Warning </td>
					<td><span class="badge badge_warning">4</span></td>
					<td><code>&lt;span class="badge badge_warning"&gt;</code></td>
				</tr>
				<tr>
					<td> Important </td>
					<td><span class="badge badge_important">6</span></td>
					<td><code>&lt;span class="badge badge_important"&gt;</code></td>
				</tr>
				<tr>
					<td> Info </td>
					<td><span class="badge badge_info">8</span></td>
					<td><code>&lt;span class="badge badge_info"&gt;</code></td>
				</tr>
				<tr>
					<td> Inverse </td>
					<td><span class="badge badge_inverse">10</span></td>
					<td><code>&lt;span class="badge badge_inverse"&gt;</code></td>
				</tr>
			</tbody>
		</table>
	</div>
</div>
<!-- 标签和标识 end -->
<!-- 提示 start -->
<div class="panel_box">
	<div class="panel_title">
		<span class="panel_icon"><i class="icon icon_bookmark"></i></span>
		<h5>Tooltip</h5>
	</div>
	<div class="panel_content">
		<p>提供四个方向的提示。</p>
		<p>
			<button class="btn tip-top" original-title="Tooltip in top">Top</button>
			<button class="btn tip-left" original-title="Tooltip in left">Left</button>
			<button class="btn tip-right" original-title="Tooltip in right">Right</button>
			<button class="btn tip-bottom" original-title="Tooltip in bottom">Bottom</button>
		</p>
	</div>
</div>
<!-- 提示 end -->
<!-- 分页 start -->
<div class="panel_box">
	<div class="panel_title">
		<span class="panel_icon"><i class="icon icon_bookmark"></i></span>
		<h5>Pagination</h5>
	</div>
	<div class="panel_content">
		<h3>Default pagination</h3>
		<div class="pagination">
			<ul>
				<li><a href="#">Prev</a></li>
				<li class="active"> <a href="#">1</a> </li>
				<li><a href="#">2</a></li>
				<li><a href="#">3</a></li>
				<li><a href="#">4</a></li>
				<li><a href="#">Next</a></li>
			</ul>
		</div>
		<h3>Alternate pagination</h3>
		<code>&lt;div class="pagination alternate"&gt;</code>
		<div class="pagination alternate">
			<ul>
				<li class="disabled"><a href="#">Prev</a></li>
				<li class="active"> <a href="#">1</a> </li>
				<li><a href="#">2</a></li>
				<li><a href="#">3</a></li>
				<li><a href="#">4</a></li>
				<li><a href="#">Next</a></li>
			</ul>
		</div>
	</div>
</div>
<!-- 分页 end -->
<!-- 标题 start -->
<div class="panel_box">
	<div class="panel_title">
		<span class="panel_icon"><i class="icon icon_bookmark"></i></span>
		<h5>标题</h5>
	</div>
	<div class="panel_content">
		<div class="bs-docs-example">
			<h1>h1. Heading 1</h1>
			<h2>h2. Heading 2</h2>
			<h3>h3. Heading 3</h3>
			<h4>h4. Heading 4</h4>
			<h5>h5. Heading 5</h5>
			<h6>h6. Heading 6</h6>
		</div>
	</div>
</div>
<!-- 标题 end -->